<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理:新增试卷:第一步 -->
<template>
  <div style="width:100% !important;">
    <el-form>
      <el-form-item label="课程【课程编码】"
                    class="planname"
                    prop="planname">
        <br />
        <el-select v-model="data1.itempool.kcbmmc"
                   placeholder="请选择课程和课程编码">
          <el-option v-for="item in shTklist"
                     :key="item.id"
                     :label="item.kcmc"
                     :value="item.id">
            {{item.kcmc}}【{{item.kcbm}}】
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试卷标题"
                    class="planname"
                    prop="planname">
        <br />
        <el-input class="sjbt"
                  v-model="data1.sjbt" />
      </el-form-item>
      <el-form-item label="试题章节"
                    prop="planname">
        <br />
        <el-input class="stzj"
                  size='mini'
                  v-model="data1.stzj" />
        <el-button :plain=true
                   width=29%
                   @click="xzzj()"
                   size="mini"
                   type="success">选择章节</el-button>
      </el-form-item>
      <el-form-item label="关键字"
                    size="mini"
                    prop="planname">
        <br />
        <el-input class="stzj"
                  v-model="data1.gjz" />
      </el-form-item>
      <el-form-item label="描述"
                    prop="planname">
        <br />
        <el-input type="textarea"
                  class="ms"
                  rows="8"
                  v-model="data1.ms" />
      </el-form-item>
    </el-form>
    <chapter-dialog :dialogVisible.sync="choiceCapterDialogVisible"
                    @save="onChoiceDialogSaveHandler"
                    @cancel="onChoiceDialogCancelHandler"
                    :treeData="treeData"
                    @clickdata='clickdata'
                    @sshow=sshow />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import ChapterDialog from '../questions/chapterDialog.vue'
import { getQuestionlist, getchaptersById } from '@/api/examinations/gitlist'
export default {
  components: {
    'chapter-dialog': ChapterDialog,
  },
  data() {
    return {
      data1: {
        kcbmmc: '',
        sjbt: '',
        stzj: '',
        gjz: '',
        ms: '',
        itempool: { kcbmmc: '' },
      },
      treeData: '',
      shTklist: {},
      choiceCapterDialogVisible: false,
    }
  },
  created() {
    getQuestionlist(1, 100, {}).then((res) => {
      let records = res.data.data.records
      records.forEach((element) => {
        element.kcbmmc = element.kcmc + '【' + element.kcbm + '】'
      })
      console.log(records)
      this.shTklist = records
    })
  },
  methods: {
    sshow(x) {
      this.choiceCapterDialogVisible = x
    },
    clickdata(x) {
      console.log(x.zjmc, '=========')
      this.data1.stzj = x.zjmc
    },
    Submit() {
      sessionStorage.setItem('data1', this.data1)
    },
    xzzj() {
      if (this.data1.itempool.kcbmmc) {
        getchaptersById(this.data1.itempool.kcbmmc).then((res) => {
          this.treeData = res.data.data.chapters.children
          console.log(this.treeData)
        })
        this.choiceCapterDialogVisible = true
      } else {
        Message({
          message: '请先选择课程',
          type: 'error',
        })
      }
    },
    onChoiceDialogSaveHandler: function (pVal) {
      Message({
        message: 'ChoicedCapter=' + pVal.label,
        type: 'error',
      })
      this.choiceCapterDialogVisible = false
      this.questionModel.capter = pVal.label
    },
    onChoiceDialogCancelHandler: function () {
      this.choiceCapterDialogVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
/deep/ .planname {
  width: 70%;
}
/deep/ .stzj {
  width: 50%;
  margin-right: 30px;
}
.ms {
  width: 70%;
}
</style>